import React from 'react';
import NVD3Chart from 'react-nvd3';
import { API_SERVER ,stockname} from './../../../../config/constant';
import axios from 'axios';
function generateNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

function getDatum() {
    let sin = [],
        sin2 = [],
        sin3 = [];

    const len = 35 + Math.random() * (70 - 35);
    for (let i = 0; i < len; i++) {
        sin.push({
            x: i,
            y: generateNumber(0, 60)
        });
        sin2.push({
            x: i,
            y: generateNumber(0, 100)
        });
        sin3.push({
            x: i,
            y: generateNumber(0, 30)
        });
    }
    return [
        {
            values: sin,
            key: 'Stream #0',
            color: '#A389D4'
        },
        {
            values: sin3,
            key: 'Stream #1',
            color: '#04a9f5'
        },
        {
            values: sin2,
            key: 'Stream #3',
            color: '#1de9b6',
            area: true
        }
    ];
}

const sin = [],sin2=[];
const time=[] ;
function getDatum2() {


    axios.post(API_SERVER + 'stocks/getdata', {
            "stockname":stockname
        })
        .then(function (response) {      
            for (var i = 0; i < response.data.data.length; i++) {
                sin.push({
                    x: i,
                    y: response.data.pctchg[i]
                });
                time.push(response.data.time[i]);
            }
            if (response.data.success) {
                console.log(response.data);
                //alert(response.data)
            }
        })
        .catch(function (error) {
            console.log(error);
        });
            
    return [
        {
            values: sin,
            key: stockname,
            color: 'Stream #2',
            area: true
        }
    ];
}
//const data = getDatum2();

const data = getDatum2();
const MultiBarChart = () => {
    // xAxis1= {
    //     tickFormat: function (s) {
    //         return time[s];
    //     },
    //     axisLabel: '时间'
    // }

    // return <NVD3Chart type="multiBarChart" datum={data} x="x" y="y" height={300} showValues groupSpacing={0.2} onchange={data}/>;
    return (
        <React.Fragment >
            {React.createElement(NVD3Chart, {
                xAxis: {
                    tickFormat: function (s) {
                        return time[s];
                    },
                    axisLabel: '时间'
                },
                yAxis: {
                    axisLabel: '涨跌幅',
                    tickFormat: function (d) {
                        return parseFloat(d).toFixed(2);
                    }
                },
                type: 'multiBarChart',
                datum: data,
                x: 'x',
                y: 'y',
                height: 300,
                renderEnd: function () {
                    console.log('renderEnd');
                }
            })}
        </React.Fragment>
    );
};

export default MultiBarChart;
